<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from "vue";
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "标题",
    },
  },
  setup() {},
});
</script>



<template>
    <div>
        <el-row>
             <el-col :span="24">
                <div class="addTitle">
                    <span>商品添加编辑</span>
                     <el-button plain @click="pageReturn()"><el-icon><ArrowLeft /></el-icon>返回</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="bulk">
                    <span>商品分类:</span>
                      <el-select v-model="value" clearable class="inSearch" placeholder="请选择商品分类" >
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>      
                </div>
            </el-col>
        </el-row>
          <el-row>
             <el-col :span="24">
                <div class="typ">
                    <span>商品类型:</span>
                     <el-radio-group v-model="radio">
                       <el-radio :label="1" class="xuNi">虚拟商品</el-radio>
                       <el-radio :label="2">实物商品</el-radio>
                       <el-radio :label="3">积分兑换商品</el-radio>
                    </el-radio-group>
                </div>
            </el-col>
         </el-row>
          <el-row>
             <el-col :span="24">
                <div class="Name" >
                    <span>商品名称:</span>
                    <el-input v-model="input" placeholder="请输入商品名称" clearable class="inName"/>
                </div>
            </el-col>
          </el-row>
           <el-row>
              <el-col :span="24">
                <div class="introduce">
                    <span>商品介绍:</span>
                    <el-input v-model="textarea" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="商品简介" class="shopIntroduce"/>
                </div>
              </el-col>
            </el-row>
            <el-row>
               <el-col :span="24">
                <div class="dia">
                    <span>标签:</span>
                    <el-checkbox-group v-model="checkboxGroup2" >
                       <el-checkbox-button v-for="dialog in dialogs" :key="dialog" :label="dialog" class="check">{{  dialog  }}</el-checkbox-button>
                    </el-checkbox-group>
                    <el-input v-model="input2" placeholder="请输入标签名称" clearable class="inDia"/>
                     <el-button type="primary">添加</el-button>
                </div>
               </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="limit">
                        <span>选择最多不超过5个标签</span>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="headImg">
                        <span>商品头图:</span>
                        <div class="box">
                          <div class="boxImg">
                            <div class="block">
                            <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
                            <div>
                            <el-button type="primary" text>商品主图</el-button>
                            <el-button type="danger" text>删除图片</el-button>
                            </div>           
                         </div>   
                          <div class="block">
                            <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
                            <div>
                            <el-button type="primary" text>设为主图</el-button>
                            <el-button type="danger" text>删除图片</el-button>
                            </div>           
                         </div>   
                          <div class="block">
                            <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
                            <div>
                            <el-button type="primary" text>设为主图</el-button>
                            <el-button type="danger" text>删除图片</el-button>
                            </div>           
                         </div>   
                          <div class="block">
                            <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
                            <div>
                            <el-button type="primary" text>设为主图</el-button>
                            <el-button type="danger" text>删除图片</el-button>
                            </div>           
                         </div>   
                          <div class="block">
                            <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />
                            <div>
                            <el-button type="primary" text>设为主图</el-button>
                            <el-button type="danger" text>删除图片</el-button>
                            </div>           
                         </div>   
                          </div>
                            <el-upload class="load" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                                   <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                   <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                            </el-upload>
                        </div>
                       
                        
                    </div>
                    
                </el-col>
            </el-row>

    </div>
</template>
<style scoped>
.addTitle{
    background-color: #f3f3f3;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.bulk{
    margin-left: 150px;
    margin-top: 20px;
}
.typ{
    margin-left: 150px;
    margin-top: 20px;
}
.xuNi{
    margin-left: 10px;
}
.inName{
    width: 300px;
    margin-left: 10px;
}
.Name{
    margin-left: 150px;
    margin-top: 20px;
}
.shopIntroduce{
    width: 400px;
    margin-left: 10px;
}
.introduce{
    margin-left: 150px;
    margin-top: 20px;
    height: 100px;
    display: flex;
}
.dia{
    margin-left: 150px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.check{
    margin-left: 40px;
}
.inSearch{
    margin-left: 10px;
}
.inDia{
    width: 200px;
    margin-left: 20px;
    margin-right: 10px;
}
.limit{
    margin-top: 20px;
    margin-left: 225px;
    color: rgb(153,153,153);
    font-size: 13px;
    font-weight: 400;
}
.headImg{
    margin-left: 150px;
    margin-top: 20px;
    display: flex;
}
.block{
    border: 1px solid #CCCCCC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    margin-left: 10px;
}
.boxImg{
    display: flex;
}
.load{
    margin-left: 10px;
    margin-top: 15px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    width: 178px;
    height: 178px;
    display: block;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.load:hover {
  border-color: var(--el-color-primary);
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>